<script setup lang="ts">
  import { computed } from 'vue'

  defineOptions({
    name: 'ColorFont',
    inheritAttrs: false
  })
  interface Props {
    title: string
    color?: string[]
    bgSize?: string
    fontSize?: string
    trans?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    color: () => ['#f45925', '#f9b11f', '#c0f425'],
    bgSize: '400%',
    fontSize: '14px',
    // 是否使用i18n翻译
    trans: false
  })

  const bgStart = 'linear-gradient(90deg, '
  const bgEnd = `) 0 0 / ${props.bgSize} 100%`

  const bg = computed(() => {
    let str = ''
    props.color.forEach((item, index) => {
      // 不是第一个拼接逗号跟空格
      if (index > 0) {
        str += ', '
      }
      str += item
    })
    str = `${bgStart}${str}, ${props.color[0]}${bgEnd}`
    return str
  })
</script>

<template>
  <div
    class="word"
    :style="{
      background: bg
    }"
    >{{ trans ? $t(title) : title }}</div
  >
</template>

<style lang="scss" scoped>
  .word {
    animation: move-bg 8s infinite linear;

    color: transparent;
    background: linear-gradient(90deg, #f45925, #f9b11f, #c0f425, #f45925) 0 0 / var(--bg-size) 100%;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    font-size: clamp(1rem, 25vmin, v-bind(fontSize));

    --bg-size: v-bind(bgSize);
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes move-bg {
      to {
        background-position: var(--bg-size) 0;
      }
    }
  }
</style>
